<template>
  <div class="control">
    <Navbar :bg="navBg" :title="navTitle" />
    <div class="items">
      <van-skeleton v-if="!controlData.length" :row="5" />
      <div v-if="controlData.length" class="item" v-for="(item, index) in controlData" :key="index">
        <div class="left" @click="toEdit(item, index)">
          <div class="title">{{ controlIndexList[index] }}</div>
          <div class="time">{{ item.startHour }}:{{ item.startMin }} ~ {{ item.endHour }}:{{ item.endMin }}</div>
          <div class="week">{{ item.weekStr }}</div>
          <div class="config">
            {{ item.blowing ? `送风${numToStrNum(item.exhaust)}档` : '' }}
            {{ item.exhaust ? `排风${numToStrNum(item.exhaust)}档` : '' }} {{ item.pdp ? '等离子' : '' }}
            {{ item.anion ? '负离子' : '' }}
          </div>
        </div>
        <div class="right">
          <van-switch v-model="item.switch" @change="handleSwitchChange" size="22px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '@/components/Navbar.vue'
import { ref, watch } from 'vue'
import { controlIndexList } from '@/utils/enum.js'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()

const navBg = ref('#fff')
const navTitle = ref('程控设置')
let controlData = ref([])
const numToStrNum = (num: number) => {
  const arr = ['一', '二', '三']
  return arr[num]
}

const handleSwitchChange = (val: any) => {
  console.log('handleSwitchChange', val)
}

const init = () => {
  const { deviceInfo } = store.state
  if (deviceInfo.control) {
    controlData.value = deviceInfo.control
  }
}
init()

watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true, immediate: true }
)

const toEdit = (item: any, index: number) => {
  console.log('edit')
  router.push({ path: '/controlEdit', query: { item: JSON.stringify(item), index: index + 1 } })
}
</script>
<style lang="less" scoped>
@import url(../assets/style/control.less);
:deep(.van-skeleton) {
  background-color: #fff;
}
</style>
